<template>
  <li class="notice">
    <a href="#" @click.prevent="handlePop()">发布公告</a>
    <img class="arrow-down" src="../../assets/icon/arrowDown.svg" alt="" />
    <div class="hidden">
      <div class="dropdown-content">
        <span class="dropdown-item" @click="dialogVisibleCommon = true">普通公告</span>
        <span class="pop" @click="add_gdb_Line()">施工公告</span>
        <span class="dropdown-item" @click="dialogVisibleManagement = true">公告管理</span>
      </div>
    </div>
  </li>
  <el-dialog title="普通公告" v-model="dialogVisibleCommon">
    <CommonNotice />
  </el-dialog>
  <el-dialog title="公告管理" v-model="dialogVisibleManagement" :before-close="handleClose">
    <ManagementNotice />
  </el-dialog>
  <el-dialog title="施工公告" v-model="dialogVisibleBuild">
    <div>
      <div>需要通知的物业及电话</div>
      <el-scrollbar height="170px">
        <!-- <p></p> -->
        <!-- <div v-for="item1 in smallarea" :key="item1.undefined" class="scrollbar-demo-item">
          <div v-for="(item2, index) in item1.AttValue.slice(3, 5)" :key="index">
            <span>{{ item2 }}</span>
            <div>{{ item2 }}</div>
          </div>
        </div> -->
        <div v-for="item in smallarea" :key="item.FID" class="scrollbar-demo-item">
          <span class="wutel">{{ item.AttValue[4] }}</span>
          <span class="wutel">{{ item.AttValue[5] }}</span>
        </div>
      </el-scrollbar>
    </div>
    <div>
      <span>公告标题 :</span>
      <input type="text" placeholder="请输入公告题目" v-model="title" /><br /><br />
      <span>公告内容：</span> <br /><b /><textarea
        name=""
        id=""
        cols="92"
        rows="10"
        placeholder="请输入公告内容"
        v-model="content"
      ></textarea>
      <div class="footer">
        <el-button type="primary" round @click="handleAdd()">发布公告</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import CommonNotice from './components/CommonNotice/CommonNotice.vue'
import ManagementNotice from './components/ManagementNotice/ManagementNotice.vue'
import { addnoticePost } from '../../request/noticeHttp'
import { createDraw } from '../../Hooks/useDraw'
import { addLine } from './Hooks/addLine'
import { ref, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useGlobalMap } from '../../plugins/globalmap'

const dialogVisibleCommon = ref(false)
const dialogVisibleManagement = ref(false)
const dialogVisiblePop = ref(false)

function handlePop() {
  dialogVisiblePop.value = !dialogVisiblePop.value
}
const handleClose = (done) => {
  ElMessageBox.confirm('您将关闭页面')
    .then(() => {
      done()
    })
    .catch(() => {})
}

const dialogVisibleBuild = ref(false)

const title = ref()
const content = ref()
const user_id = ref(2)
const smallarea = ref()

let map = ref()

onMounted(() => {
  map.value = useGlobalMap()
})

function handleAdd() {
  if (!title.value || !content.value) {
    alert('请填写完整信息')
    retur
  }
  addnoticePost(user_id.value, title.value, content.value)
    .then((res) => {
      // console.log(res)
      alert('发布成功')
      dialogVisibleBuild.value = false
      title.value = ''
      content.value = ''
    })
    .catch((err) => {
      // console.log(err)
      alert('发布失败')
    })
}

var doccLayer = new Zondy.Map.Doc('', 'huanchong', {
  ip: 'localhost',
  port: 6163
})
var vectorData = 'gdbp://MapGISLocalPlus/guanggu/sfcls/line'
const vecLayer = new Zondy.Map.GdbpLayer('', [vectorData], {
  ip: 'localhost',
  port: 6163
})

/* 设置画布 */
var source = new ol.source.Vector({})
var layer = new ol.layer.Vector({
  source
})

let draw = null
function add_gdb_Line() {
  map.value.addLayer(vecLayer, doccLayer)
  map.value.addLayer(layer)
  draw = createDraw({
    type: 'LineString',
    source
  })
  map.value.addInteraction(draw)
  draw.on('drawend', (evt) => {
    var geometry = evt.feature.getGeometry().getCoordinates()
    // console.log(geometry)
    var position = geometry
    var attr = []
    var service = {
      name: 'huanchong',
      layerId: 0
    }
    addLine({
      position,
      attr,
      service,
      doccLayer
    })
    /* 清除画笔 */
    map.value.removeInteraction(draw)
    draw.setActive(false)
    multiBuffAnalysis()
  })
  // 监听画笔结束
  draw.on('drawend', (evt) => {
    // console.log(evt.feature.getGeometry().getCoordinates())
    map.value.removeInteraction(draw)
    //   setInterval(() => {
    // dialogVisibleBuild.value = true
    //   }, 1000)
    dialogVisibleBuild.value = true
  })
}
/* 实现缓冲区分析*/
/* 步骤 */
/*
        1、调用中地接口创建缓冲区分析对象
        2、设置分析对象
        3、设置分析结果
        4、执行分析 
         */
let resultName = null

function multiBuffAnalysis() {
  var clsBufBySR = new Zondy.Service.ClassBufferBySingleRing({
    ip: 'localhost',
    port: '6163',
    //经纬度坐标系下,缓冲区的半径单位为度
    leftRad: 0.001,
    rightRad: 0.001,
    //不允许根据属性字段设置缓冲区半径
    isByAtt: false
  })
  /* 设置时间戳,希望分析结果是随机的图层 */
  resultName = vectorData + Date.now()
  /* 2、设置分析参数 */
  //设置源图层
  clsBufBySR.srcInfo = vectorData
  //设置分析结果图层
  clsBufBySR.desInfo = resultName
  /* 3、执行分析 */
  clsBufBySR.execute(onSuccess, 'post', false, 'json')
}

function onSuccess(result) {
  // console.log(result)
  // console.log(result.results[0].Value)
  if (result.succeed) {
    const resultLayer = new Zondy.Map.GdbpLayer('', [resultName], {
      ip: 'localhost',
      port: 6163
    })
    // console.log(resultLayer);
    map.value.addLayer(resultLayer)
    const layer1 = result.results[0].Value
    overAnalysis(layer1)
    source.clear()
    // console.log(map.value.getLayers().getArray())
    map.value.removeLayer(map.value.getLayers().item(2))
    map.value.removeLayer(map.value.getLayers().item(3))
    map.value.removeLayer(map.value.getLayers().item(4))
    delLine()
  }
}
// 叠加分析
// /* 叠加分析 */
let resultname1
function overAnalysis(layer1) {
  // console.log(result)
  var vectorData1 = 'gdbp://MapGisLocal/wuhan/sfcls/居民区'
  //2.1设置要叠加的多边形
  resultname1 = vectorData1 + Date.now()
  //2.2 创建叠加分析服务
  var overlayParam = new Zondy.Service.ClipByLayer({
    ip: 'localhost',
    port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089,
    //设置被叠加图层URL
    srcInfo1: vectorData1,
    //设置被叠加图层URL
    srcInfo2: layer1,
    //设置结果URL
    desInfo: resultname1
  })
  //2.3 执行叠加分析
  //调用基类的execute方法,执行叠加分析,onSuccess为结果回调函数
  overlayParam.execute(onSuccess1, 'post', false, 'json', onError)
}
//2-4、分析结果显示到地图容器上
function onSuccess1(result) {
  // console.log(result)
  if (result.succeed) {
    map.value.removeLayer(vecLayer)
    // console.log(resultname1)
    const resultLayer = new Zondy.Map.GdbpLayer('', [resultname1], {
      ip: 'localhost',
      port: '6163'
    })
    // map.value.addLayer(resultLayer)

    queryByAttribute(result.results[0].Value)
  }
}
function onError(err) {
  // console.log(err)
}

// 查询
function queryByAttribute(res) {
  //初始化查询结构对象，设置查询结构包含几何信息
  var queryStruct = new Zondy.Service.QueryFeatureStruct()
  queryStruct.IncludeGeometry = true
  //实例化查询参数对象
  var queryParam = new Zondy.Service.QueryByLayerParameter(res, {
    resultFormat: 'json',
    struct: queryStruct
  })
  //设置查询分页号
  queryParam.pageIndex = 0
  //设置查询要素数目
  queryParam.recordNumber = 200

  //实例化地图文档查询服务对象
  var queryService = new Zondy.Service.QueryLayerFeature(queryParam, {
    ip: 'localhost',
    port: '6163' //访问IGServer的端口号，.net版为6163，Java版为8089
  })
  //执行查询操作，querySuccess为查询回调函数
  queryService.query(querySuccess, queryError)
}

//查询失败回调
function queryError(e) {
  //停止进度条
  // stopPressBar()
  // console.log('失败')
}

//查询成功回调
function querySuccess(result) {
  // console.log(result)
  // console.log(result.SFEleArray)
  smallarea.value = result.SFEleArray
  // delFeature()
}

function delLine() {
  var deleteService = new Zondy.Service.EditDocFeature('huanchong', 0, {})
  let arr = []
  for (let i = 0; i <= 100; i++) {
    arr.push(i)
  }
  deleteService.deletes(arr, onLineSuccess)
}
function onLineSuccess(result) {
  if (result) {
    // alert("删除要素成功！");
    // doccLayer.refresh()
  } else {
    alert('删除要素失败！')
  }
}
</script>

<style lang="less" scoped>
.el-dialog {
  width: 400px;
  height: 600px;
  z-index: 300;
}
a {
  font-size: 16px;
  color: #333;
  text-decoration: none;
}
.notice {
  position: relative;
  margin-right: 20px;
  padding-top: 6px;
}
.hidden {
  display: none;
  .dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.7) 60%,
      rgba(255, 255, 255, 1) 100%
    );
    border-radius: 20px 20px 5px 5px;
    .dropdown-item {
      width: 100%;
      text-align: center;
      padding: 5px;
      font-size: 15px;
      box-sizing: border-box;
      cursor: pointer;
      &:first-child {
        margin-top: 15px;
      }
      &:hover {
        background-color: rgba(0, 255, 255, 0.2);
      }
    }
  }
}

.notice:hover .arrow-down {
  transform: rotate(0);
}

.notice:hover .hidden {
  display: block;
}

.hidden:hover {
  display: block;
}

.pop {
  display: flex;
  justify-content: center;
  padding: 5px 0;
  width: 100%;
  font-size: 15px;
}
.pop:hover {
  cursor: pointer;
  background-color: rgba(0, 255, 255, 0.2);
}
input {
  margin: 0 20px;
  padding: 0 20px;
  // width: 500px;
  width: 70%;
  height: 30px;
  border-radius: 10px;
}
textarea {
  width: 90%;
  margin-top: 20px;
  padding: 20px;
  border-radius: 10px;
}
.footer {
  margin-top: 20px;
  margin-left: 85%;
}
.el-scrollbar {
  margin: 20px 0;
}
.scrollbar-demo-item {
  display: flex;
  // align-items: center;
  // justify-content: center;
  height: 50px;
  margin: 10px;
  // text-align: center;
  border-radius: 4px;
  background: rgb(#00e5ff, green, blue);
  color: red;
}
.wutel {
  width: 40%;
  padding: 0 10%;
  margin: 0 30px;
}
</style>
